<template>
	<view class="zg-area">
		<view class="content">
			<!-- 轮播图 -->
			<view class="swiper-wapper">
				<swiper :indicator-dots="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in details.albumPics" :key="index">
						<view class="swiper-item">
							<image :src="`${shopImgUrl}${item}`" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 限时秒杀 -->
			<view class="xsms">
				<view class="xsms-left">
					<template v-if="f_time === '无效的结束时间' || f_time === '无效的结束时间'">
						<view>{{f_time}}</view>
					</template>
					<template v-else>
						<view>距结束</view>
						<text style="margin-right: 12rpx;">{{f_time.split(':')[0]}}</text>
						<view style="margin-right: 6rpx;">:</view>
						<text style="margin-right: 12rpx;">{{f_time.split(':')[1]}}</text>
						<view style="margin-right: 6rpx;">:</view>
						<text>{{f_time.split(':')[2]}}</text>
					</template>
				</view>
				<view class="xsms-right">
					限时拼团
				</view>
			</view>
			<!-- 商品属性 -->
			<view class="spsx">
				<view class="spsx-title">
					{{details.name || ''}}
				</view>
				<view class="spsx-content">
					<view class="spsx-content-left">
						<text class="tp-fz24">￥</text>
						<text class="tp-fz36">{{details.ptPrice || 0}}</text>
						<text class="tp-fz24">￥{{yuanPrice || 0}}</text>
					</view>
					<view class="spsx-content-right">
						<text>销量 : {{ handleSales(details.sale) }}</text>
						<text>运费 : {{details.postage || 0}}元</text>
					</view>
				</view>
			</view>
			<!-- 选择1 -->
			<view class="box1">
				<view class="box1-row">
					<view class="box1-row-left">
						<text>规格</text>
					</view>
					<view class="box1-row-right" @click="openP1">
						<text>{{ specificationStr || '请选择'}}</text>
						<image src="/pagesShop/static/right.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 团购列表 -->
			<view class="tj">
				<view class="tj-title">
					<view class="tt-left">
						<text>团购列表</text>
						<image @click="goRouter3" class="tip-img" src="../static/moneywen.png" mode="scaleToFill"></image>
					</view>
					<view class="tt-right" @click="goRouter4">
						<text>查看更多</text>
						<image src="/pagesShop/static/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="tg-content">
					<view class="tg-item" v-for="(item,index) in list3" :key="index">
						<view class="tg-item-left">
							<image v-for="(item1,index1) in item.ptAdds" :key="index1" :src="/^[http | https]/.test(item1.customerAvatar) ? item1.customerAvatar : shopImgUrl + item1.customerAvatar"
							 mode="aspectFill"></image>
						</view>
						<view class="tg-item-right">
							<view class="tir-1">
								<view class="tir-1-title">
									还差<text>{{item.successNumber - item.currentNumber}}人</text>拼成
								</view>
								<view class="tir-1-content">
									剩余{{item.f_time}}
								</view>
							</view>
							<view class="tir-2">
								<button plain @click="buy2(item)">去拼单</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 用户评价 -->
			<view class="tj">
				<view class="tj-title">
					<view class="tt-left">
						<text>用户评价</text>
					</view>
					<view class="tt-right" @click="goRouter1">
						<text>查看更多</text>
						<image src="/pagesShop/static/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="pj-tags" v-if="list1.length > 0">
					<view class="pj-tag" v-for="(item,index) in list1" :key="index">
						{{item.value}}
					</view>
				</view>
				<!-- 评论 -->
				<view class="pl-content">
					<view class="pl-row" v-for="(item, index) in list" :key="index">
						<view class="pl-top">
							<view class="pl-left flex-1">
								<view class="pl-left-img">
									<image :src="/^[http | https]/.test(item.customerAvatar) ? item.customerAvatar  : `${shopImgUrl}${item.customerAvatar}`"
									 style="border-radius: 50%;" mode="aspectFill"></image>
								</view>
								<view class="">
									<view class="pl-left-title">{{item.customerName || ''}}</view>
									<view class="pl-left-info ">
										<text v-for="(item2,index2) in handleArr2(item.productSku)" :key="index2">
											{{item2.specification || '规格'}}: {{item2.value || ''}}
										</text>
									</view>
								</view>
							</view>
							<view class="pl-right">
								<view class="pl-right-time">
									{{item.createTime || ''}}
								</view>
								<view class="pl-right-start">
									<image class="tp-img32 tp-ml10" v-for="(item4,index4) in (item.score - 0)" :key="index4" src="../static/start4.png"
									 mode="widthFix"></image>
									<image class="tp-img32 tp-ml10" v-for="(item3,index3) in 5 - (item.score - 0)" :key="index3" src="/pagesShop/static/start3.png"
									 mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="pl-bottom">
							{{item.content || ''}}
						</view>
						<view class="pl-imgs">
							<image v-for="(item1, index1) in item.imgArr" :key="index1" :style="{marginRight: (index1 + 1) % 4 == 0 ? '0' : '30rpx'}"
							 :src="item1" @click="previewImg(item1,item.imgArr)" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 店铺介绍 -->
			<view class="dp">
				<view class="dp-top">
					<view class="dp-top-left">
						<image :src="`${shopImgUrl}${details.scCover}`" mode="aspectFill"></image>
						<text>{{details.scName || '店铺名称'}}</text>
					</view>
					<view class="dp-top-right">
						<button type="default" @click="goRouter2">进店</button>
					</view>
				</view>
				<view class="dp-bottom">
					<view class="dp-title">
						<image src="/pagesShop/static/sd2.png" mode="widthFix"></image>
						<text class="tp-fc666">商品详情</text>
						<image src="/pagesShop/static/sd1.png" mode="widthFix"></image>
					</view>
					<view class="dp-p">
						<rich-text :nodes="details.description"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom">
			<view class="ftb-l">
				<view class="ftb-l-item" @click="servive">
					<image src="/pagesShop/static/fb1.png" mode=""></image>
					<text>客服</text>
				</view>
				<view class="ftb-l-item" @click="action3">
					<image v-if="isCon === '0'" src="/pagesShop/static/start2.png" mode=""></image>
					<image v-else src="/pagesShop/static/fb2.png" mode=""></image>
					<text>收藏</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="ftb-l-item" open-type="share">
					<image src="/pagesShop/static/fb3.png" mode="widthFix"></image>
					<text>分享</text>
				</button>
				<!-- #endif -->
			</view>
			<view class="ftb-r">
				<button plain @click="buy(1)"> <text class="tp-fz26">单独购买￥{{details.discountPrice || 0}}</text></button>
				<button plain @click="buy(2)">发起拼团</button>
			</view>
		</view>
		<!-- 规格 -->
		<uni-popup type="bottom" ref="p1" :maskClick="false">
			<view class="sp-a">
				<view class="sp-a-1">
					<view class="spa1-left">
						<view class="spa1-img">
							<image :src="`${shopImgUrl}${details.pic}`" mode="aspectFill"></image>
						</view>
						<view class="spa1-content">
							<view class="spa1-price">
								<text>￥</text>
								<text v-if="sizeKan">{{details.teamPrice || details.ptPrice}}</text>
								<text v-else>{{details.price || details.discountPrice}}</text>
								<text>￥{{yuanPrice || 0}}</text>
							</view>
							<view class="spa1-info">
								库存{{details.stock || 0}}件
							</view>
							<view class="spa1-text">
								<text>{{ specificationStr }}</text>
							</view>
						</view>
					</view>
					<view class="spa1-right">
						<image @click="closeP1" src="/pagesShop/static/close.png" mode=""></image>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 300px">
					<view class="sp-a-2" v-for="(item,key) in spData" :key="key">
						<view class="spa2-title">{{key}}</view>
						<view class="spa2-content">
							<view class="spa2-tag" :class="{active: item1.selected}" v-for="(item1,index1) in spData[key]" :key="index1"
							 @click="selectValue1(item1,index1,key)">
								{{item1.dName || ''}}
							</view>
						</view>
					</view>
					<!-- <view class="sp-a-2" v-if="ggzhs.length > 0">
						<view class="spa2-title">规格</view>
						<view class="spa2-content">
							<view class="spa2-tag" :class="{active: ggzh === item.dName}" v-for="(item,index) in ggzhs" :key="index" 
							@click="selectValue2(item)">
								{{item.dName || ''}}
							</view>
						</view>
					</view> -->
				</scroll-view>
				<view class="sp-a-3">
					<view class="spa2-title">
						<view>购买数量</view>
						<view class="spa2-jbq">
							<image src="/pagesShop/static/minus.png" mode="heightFix" @click="jian"></image>
							<input type="text" v-model="quantity" disabled />
							<image src="/pagesShop/static/plus.png" mode="heightFix" @click="jia"></image>
						</view>
					</view>
				</view>
				<view class="sp-a-4">
					<button plain @click="comfirmSelect">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				cid: '', // 商品id
				skuId: '', // 规格型号id
				quantity: 1, // 购买数量
				yhq: '', // 优惠券
				ggzh: '', // 规格组合
				couponId: '', // 优惠券id
				ggzh_arr_type: [], // 规格类型
				specification: {
					quantity: 0,
					skuId: '',
					ggzh: '',
					ggzh_arr: [], // 规格组合名称
					couponId: '',
					couponMoney: '',
				},
				details: {},
				list: [],
				list1: [],
				list2: [],
				list3: [],
				spData: [],
				ggzhs: [],
				isCon: '1',
				f_time: '00:00:00',
				open_type: 0,
				pt_id: '',
				timer: null,
				timer2: null,
				ggAllKey: [], // 规格的名称数组
				sizeKan: true, // true 砍价的规格  false 单独购买的规格
				yuanPrice: 0, // 商品的原价
			}
		},
		computed: {
			specificationStr() {
				return this.ggzh || '选择规格'
			},
			specificationStr2() {
				return this.specification.ggzh || '请选择'
			},
		},
		onReady() {
			// 团购列表-加入拼单
			uni.$on('add-tg', data => {
				this.openP1()
				this.open_type = 3;
				this.pt_id = data.id
			})
			// 拼单付款结束
			uni.$on('pt-over', () => {
				this.getList4()
			})
		},
		onLoad(params) {
			console.log(params);
			this.cid = params.cid || ''
			if (this.cid) {
				this.getDetails1()
				this.getDetails2()
				this.getList1()
				this.getList3()

			}
			this.getList2()
		},
		onShow() {
			this.getList4()
		},
		onShareAppMessage(res) {
			return {
				title: this.details.name,
				path: '/pagesShop/details/tg_details?cid=' + this.cid + '&inviteCode=' + this.getCustomerInfo.inviteCode,
				imageUrl: this.shopImgUrl + this.details.pic,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getDetails1()
			this.getDetails2()
			this.getList1()
			this.getList3()
			this.getList4()
		},
		methods: {
			// 定时更新
			formatTime() {
				this.timer = setInterval(() => {
					const time = this.computeTime(this.details.ptFinishTime)
					// console.log(time);
					this.f_time = time
				}, 1000)
			},
			formatTime2() {
				this.timer2 = setInterval(() => {
					this.list3.map((item, index) => {
						const time = this.computeTime(item.endTime)
						// console.log(time);
						this.$set(this.list3[index], 'f_time', time)
					})
				}, 1000)
			},
			// 计算列表倒计时
			computeTime(finishTime) {
				finishTime = finishTime.replace(/-/g,"/")
				if (typeof finishTime === 'string' && new Date(finishTime).toString() !== 'Invalid Date') {
					const now_time = new Date().getTime()
					const finish_time = new Date(finishTime).getTime()
					const sy_time = finish_time - now_time
					if (sy_time > 0) {
						// 时
						const hour = Math.floor(sy_time / (1000 * 60 * 60)).toString().padStart(2, '0')
						const sy_time1 = Math.floor(sy_time % (1000 * 60 * 60))
						// 分
						const min = Math.floor(sy_time1 / (1000 * 60)).toString().padStart(2, '0')
						const sy_time2 = Math.floor(sy_time1 % (1000 * 60))
						// 秒
						const sec = Math.floor(sy_time2 / (1000)).toString().padStart(2, '0')
						// 剩余时间
						const time_str = `${hour}:${min}:${sec}`
						return time_str
					} else {
						return '拼团已结束'
					}
				} else {
					return '无效的结束时间'
				}
			},
			// 商品详情
			getDetails1() {
				this.$http.post(this.$api.shop_details_1, {}, {
					params: {
						id: this.cid, // 商品id
					}
				}).then(result => {
					uni.stopPullDownRefresh()
					if (result.code === 200) {
						const data = result.data;
						if (Object.prototype.toString.call(data) === '[object Object]') {
							this.details = data
							this.yuanPrice = data.price
							this.details.description = this.parseRichImgStyle(this.details.description)
							this.details.albumPics = this.handleArr1(this.details.albumPics) // 商品图册
							this.spData = this.mpData(this.details.mallProductSkus) // 规格
							this.ggzhs = this.mpData2(this.details.mallProductSkus) // 规格组合
							this.formatTime()
						} else {
							console.error('商品数据错误');
						}
					} else {
						uni.showToast({
							title: '获取商品信息失败',
							icon: 'none'
						})
						this.details = {}
						this.details.description = ''
						this.details.albumPics = []
						this.colors = []
						this.rls = []
						this.ggzhs = []
					}
				}).catch(() => {
					this.details = {}
					this.details.description = ''
					this.details.albumPics = []
					this.colors = []
					this.rls = []
					this.ggzhs = []
				})
			},
			// 根据用户和商品店铺id查询是否收藏
			getDetails2() {
				this.$http.post(this.$api.shop_list_8, {}, {
					params: {
						id: this.cid, // 商品id
						type: 0
					}
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code === 200) {
						this.isCon = res.data.status
					} else {
						this.isCon = "1"
					}
				}).catch(() => {
					this.isCon = "1"
				})
			},
			// 预览评价图片
			previewImg(url, arr) {
				console.log(url);
				// let arr = []
				// this.list
				uni.previewImage({
					current: url,
					urls: arr,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 评价查询
			getList1() {
				this.$http.post(this.$api.shop_list_2, {}, {
					params: {
						pageNum: 1,
						pageSize: 1,
						id: this.cid, // 商品id
						evaluationLabel: "" // 热门评价标签
					}
				}).then((result) => {
					uni.stopPullDownRefresh()
					if (result.code == 200) {
						result.data.result.map(item => {
							if (item.evaluationImg) {
								let arr = item.evaluationImg.split(',')
								let newarr = []
								item.imgArr = []
								arr.forEach(item => {
									if (!item.startsWith('http')) {
										item = this.$imgUrl + item
										newarr.push(item)
									}
								})
							}
							item.imgArr = newarr
						})
						const list = result.data.result;

						if (Array.isArray(list) && list.length > 0) {
							this.list = list.map(item => {
								item.score = (parseInt(item.score) || 0) > 5 ? 5 : parseInt(item.score)
								return item
							})
						} else {
							this.list = []
						}
					} else {
						this.list = []
					}
				}).catch(() => {
					this.list = []
				})
			},
			// 评价标签
			getList2() {
				this.$http.get(this.$api.shop_tags + '?type=400' + '&productId=' + this.cid).then((result) => {
					if (result.code === 200) {
						uni.stopPullDownRefresh()
						const list = result.data;
						if (Array.isArray(list)) {
							this.list1 = list
						} else {
							this.list1 = []
						}
					} else {
						this.list1 = []
					}
				}).catch(() => {
					this.list1 = []
				})
			},
			// 查询用户拥有的优惠券
			getList3() {
				this.$http.post(this.$api.shop_details_5, {}, {
					params: {
						id: this.cid, // 商品id
					}
				}).then(result => {
					uni.stopPullDownRefresh()
					if (result.code === 200) {
						const list = result.data;
						if (Array.isArray(list)) {
							this.list2 = list
						} else {
							this.list2 = []
						}
					} else {
						this.list2 = []
					}
				}).catch(() => {
					this.list2 = []
				})
			},
			// 获取团购列表
			getList4() {
				this.$http.post(this.$api.shop_list_3 + '?pageSize=2', {}, {
					params: {
						pageNum: 1,
						pageSize: 1,
						id: this.cid
					}
				}).then(result => {
					uni.stopPullDownRefresh()
					if (result.code === 200) {
						const list = result.data.result;
						console.log(result.data, '内容是什么')
						this.list3 = list.map(item => {
							item.f_time = ''
							return item
						})
						this.formatTime2();
					} else {
						this.list3 = []
					}
				})
			},
			// 商品收藏
			action3() {
				this.$http.get(this.$api.shop_details_4, {
					productId: this.cid, // 商品ID
					type: 2
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code === 200) {
						this.getDetails2()
					}
				})
			},
			// 选择规格
			selectValue1(item1, index1, key) {
				this.skuId = item1.id
				this.details.stock = parseInt(item1.stock) || 0
				this.details.pic = item1.pic
				this.details.teamPrice = item1.teamPrice
				this.details.discountPrice = item1.price
				this.spData[key].map((item, index) => {
					if (index === index1) {
						this.$set(item, 'selected', true)
						if (!this.specification.ggzh_arr.includes(item.dName) && !this.ggzh_arr_type.includes(key)) {
							this.specification.ggzh_arr.push(item.dName)
							this.ggzh_arr_type.push(key)
						} else {
							const index2 = this.ggzh_arr_type.findIndex(i => i === key)
							this.specification.ggzh_arr.splice(index2, 1, item.dName)
						}
						// 全选过之后改变规格id  S
						if (this.ggzh_arr_type.length == this.ggAllKey.length) {
							this.ggzhs.forEach(its => {
								let num = 0;
								this.specification.ggzh_arr.forEach(it => {
									if (JSON.parse(its.spDetail).includes(it)) {
										num++
									}
								})
								if (num == this.ggAllKey.length) {
									this.skuId = its.id
									this.details.stock = parseInt(its.stock) || 0
									this.details.pic = its.pic
									this.details.teamPrice = its.teamPrice
									this.details.price = its.price
									this.specification.price = this.details.price
									this.specification.jfDeductionAmount = this.details.jfDeductionAmount
								}
							})
						}
						// 全选过之后改变规格id  E
					} else {
						this.$set(item, 'selected', false)
					}
				})
				this.ggzh = this.specification.ggzh_arr.join('-')
			},
			// 选择规格组合
			selectValue2(item) {
				this.skuId = item.id
				this.details.stock = parseInt(item.stock) || 0
				this.details.pic = item.pic
				this.details.teamPrice = item.teamPrice
				for (let i in this.spData) {
					this.spData[i].map((item, index) => {
						this.$set(item, 'selected', false)
					})
				}
				this.ggzh = item.dName
				this.specification.ggzh_arr = []
				this.ggzh_arr_type = []
			},
			// 确认规格
			comfirmSelect() {
				if (this.ggzh_arr_type.length != this.ggAllKey.length) {
					let a = true
					for (let i = 0; i < this.ggAllKey.length; i++) {
						if (!this.ggzh_arr_type.includes(this.ggAllKey[i])) {
							uni.showToast({
								title: '请选择商品' + this.ggAllKey[i] + '规格',
								icon: 'none'
							})
							a = false
							return
						}
					}
				}
				if (!this.quantity) {
					uni.showToast({
						title: '请选择购买数量',
						icon: 'none'
					})
					return
				}
				this.specification.ggzh = this.ggzh // 规格名称
				this.specification.skuId = this.skuId // 规格id
				this.specification.quantity = this.quantity // 购买数量
				this.closeP1()
				// 单独购买
				if (this.open_type === 1) {
					this.buy(1)
					// 发起拼单
				} else if (this.open_type === 2) {
					this.buy(2)
					// 参与拼单
				} else if (this.open_type === 3) {
					this.buy2({
						id: this.pt_id
					})
				}
			},
			jian() {
				if (this.quantity > 0) {
					this.quantity--
				}
			},
			jia() {
				if (!this.details.stock) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					})
					return
				}
				if (this.quantity < this.details.stock) {
					this.quantity++
				}
			},
			// 商品规格1
			mpData(arr) {
				if (Array.isArray(arr) && arr.length > 0) {
					const data = {};
					const arr1 = []; // specification字段名称
					if (typeof arr[0].spData === "string" && arr[0].spData !== "") {
						try {
							const spData = JSON.parse(arr[0].spData)
							if (Array.isArray(spData)) {
								spData.map(item2 => {
									// 未收集的specification名称
									const index = arr1.findIndex(i => i === item2.specification)
									// console.log(index)
									if (index === -1) {
										arr1.push(item2.specification)
										data[item2.specification] = [{
											...arr[0],
											dName: item2.value,
											picUrl: item2.picUrl,
											selected: false
										}]
									} else {
										data[item2.specification].push({
											...arr[0],
											dName: item2.value,
											picUrl: item2.picUrl,
											selected: false
										})
									}

								})
								// console.log(data)
							}
						} catch (e) {
							console.log(`${index1}数据错误`);
						}
					}
					this.ggAllKey = arr1
					return data;
				} else {
					return {}
				}
			},
			// 商品规格2
			mpData2(arr) {
				if (Array.isArray(arr)) {
					const arrx = []
					arr.map(item => {
						if (item.spDetail) {
							try {
								const spDetail = JSON.parse(item.spDetail)
								if (Array.isArray(spDetail)) {
									arrx.push({
										...item,
										dName: spDetail.join('-'),
									})
								}
							} catch (e) {
								console.log(`${dataName}数据错误`);
							}
						}
					})
					return arrx;
				} else {
					return []
				}
			},
			openP1() {
				this.$refs.p1.open()
			},
			closeP1() {
				this.$refs.p1.close()
			},
			// 用户评价
			goRouter1() {
				/* if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.id === 'string' && item.id !== '') { */
				uni.navigateTo({
					url: `../list/evaluate?cid=${this.cid}`
				});
				/* } else {
					console.log('商品id错误');
				} */
			},
			// 店铺详情
			goRouter2() {
				uni.navigateTo({
					url: `../shop/index1?sid=${this.details.scId}`
				});
			},
			// 去成团规则
			goRouter3() {
				uni.navigateTo({
					url: './shopTxt'
				})
			},
			// 去团购列表
			goRouter4() {
				if (typeof this.cid === 'string' && this.cid !== '') {
					uni.navigateTo({
						url: `../list/tg?cid=${this.cid}`
					});
				} else {
					console.error('商品id错误');
				}
			},
			// 立即购买
			buy(type) {
				this.open_type = type
				if(type == 1){
					this.sizeKan = false
				}else {
					this.sizeKan = true
				}
				if (!this.cid) {
					uni.showToast({
						title: '商品id错误',
						icon: 'none'
					})
					return
				}
				if (!this.specification.skuId) {
					// uni.showToast({
					// 	title: '请选择商品规格',
					// 	icon: 'none'
					// })
					this.openP1()
					return
				}
				if (!this.specification.quantity) {
					// uni.showToast({
					// 	title: '请选择购买数量',
					// 	icon: 'none'
					// })
					this.openP1()
					return
				}
				if (type === 1) {
					uni.navigateTo({
						url: `../order/submit?cid=${this.cid}&specification=${JSON.stringify(this.specification)}&price=${this.details.discountPrice}`
					})
				} else if (type === 2) {
					uni.navigateTo({
						url: `../order/tg_submit?cid=${this.cid}&specification=${JSON.stringify(this.specification)}&price=${this.details.teamPrice}`
					})
				}
			},
			// 去拼单
			buy2(item) {
				this.open_type = 3
				this.pt_id = item.id
				this.sizeKan = true
				if (!this.cid) {
					uni.showToast({
						title: '商品id错误',
						icon: 'none'
					})
					return
				}
				if (!this.specification.skuId) {
					uni.showToast({
						title: '请选择商品规格',
						icon: 'none'
					})
					this.openP1()
					return
				}
				if (!this.specification.quantity) {
					uni.showToast({
						title: '请选择购买数量',
						icon: 'none'
					})
					this.openP1()
					return
				}
				if (item.f_time === '拼团已结束') {
					uni.showToast({
						title: '拼团已结束',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `../order/tg_submit2?cid=${this.cid}&ptOrderId=${item.id}&specification=${JSON.stringify(this.specification)}&price=${this.details.teamPrice}`
				})
			},
			// 客服
			servive() {
				if (this.details.scPhone) {
					uni.makePhoneCall({
						phoneNumber: this.details.scPhone
					})
				} else {
					uni.showToast({
						title: '暂无客服电话',
						icon: 'none'
					})
				}
			},
			handleArr1(str) {
				if (typeof str === 'string' && str !== '') {
					return str.split(',')
				} else {
					return []
				}
			},
			handleArr2(str) {
				if (typeof str === 'string' && str !== '') {
					let arr = []
					try {
						arr = JSON.parse(str)
					} catch (e) {
						//TODO handle the exception
					}
					return arr
				} else {
					return []
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tg-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.tg-item-left {
		width: 290rpx;
		overflow: hidden;
		display: flex;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}

	.tg-item-right {
		display: flex;
		align-items: center;

		button {
			font-size: 24rpx;
			background-color: #FFAF3C;
			color: #fff;
			border-radius: 6rpx;
			padding: 10rpx;
			margin-left: 20rpx;

			&:disabled {
				opacity: 0.5;
			}
		}
	}

	.tir-1-title {
		text {
			color: $uni-color-error;
		}
	}

	.tir-1-content {
		color: #999;
	}

	.sp-a2-title {
		text-align: center;
		font-size: 30rpx;
		padding: 10rpx;
	}

	.sp-a2-content {
		padding: 10rpx 0;
	}

	.sp-a2-row {
		display: flex;
		align-items: center;

		&:not(:nth-last-of-type(1)) {
			margin-bottom: 20rpx;
		}
	}

	.sp-a2-left {
		width: 200rpx;
		height: 190rpx;
		margin-right: 30rpx;
		background-color: #ff660a;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sp-a2-price {
		margin-bottom: 20rpx;

		text {
			&:nth-of-type(1) {
				font-size: 32rpx;
			}

			&:nth-of-type(2) {
				font-size: 50rpx;
			}
		}
	}

	.sp-a2-type {
		font-size: 24rpx;

		text {
			display: block;
			padding: 8rpx 30rpx;
		}

		view {
			border: 1px solid #fff;
			padding: 8rpx 30rpx;
			border-radius: 40rpx;
			box-sizing: border-box;
		}
	}

	.sp-a2-right {}

	.sp-a2-info1 {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.sp-a2-info2 {
		font-size: 24rpx;
		color: #666;
	}

	.sp-a-4 {
		padding: 30rpx;

		button {
			background-color: $uni-color-error;
			color: #fff;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44px;
		}
	}

	.sp-a {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.sp-a-close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.sp-a-1 {
		display: flex;
		justify-content: space-between;
	}

	.spa1-left {
		display: flex;
		align-items: center;
	}

	.spa1-right {
		display: flex;
		align-items: flex-start;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.spa1-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		overflow: hidden;

		image {
			border-radius: 12rpx;
			width: 160rpx;
			height: 160rpx;
		}
	}

	.spa1-content {}

	.sp-a-2 {
		border-bottom: 1px solid #ebebeb;
	}

	.spa2-title {
		font-size: 28rpx;
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.spa2-jbq {
		display: flex;

		image {
			width: auto;
			height: 40rpx;
		}

		input {
			text-align: center;
			width: 40rpx;
			height: 40rpx;
			background-color: #ebebeb;
			min-height: auto;
			font-size: 24rpx;
		}
	}

	.spa2-content {
		display: flex;
		flex-wrap: wrap;
	}

	.spa2-tag {
		font-size: 28rpx;
		padding: 6rpx 20rpx;
		border: 1px solid #ebebeb;
		background-color: #ebebeb;
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 0;

		&.active {
			background-color: #ffe8e6;
			border: 1px solid $uni-color-error;
			color: $uni-color-error;
		}
	}

	.spa1-price {
		text {
			&:nth-of-type(1) {
				font-size: 24rpx;
				color: $uni-color-error;
				font-weight: bold;
			}

			&:nth-of-type(2) {
				font-size: 36rpx;
				color: $uni-color-error;
				font-weight: bold;
			}

			&:nth-of-type(3) {
				margin-left: 20rpx;
				font-size: 24rpx;
				text-decoration: line-through;
				color: #999;
			}
		}
	}

	.spa1-info {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx 0;
	}

	.spa1-text {
		text {
			margin-right: 10rpx;
		}
	}

	.dp {
		background-color: #fff;
		margin: 30rpx 0 0;
	}

	.dp-title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;

		image {
			width: 60rpx;
			height: auto;
		}

		text {
			font-size: 28rpx;
			width: 6em;
			text-align: center;
		}
	}

	.dp-p {
		font-size: 28rpx;
		color: #333;
		line-height: 2;
		margin-bottom: 20rpx;
	}

	.dp-bottom {
		padding: 0 30rpx 30rpx;
	}

	.dp-top {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ddd;
	}

	.dp-top-left {
		display: flex;
		align-items: center;

		font-size: 26rpx;
		color: #333;

		image {
			border-radius: 8rpx;
			width: 70rpx;
			height: 70rpx;
			margin-right: 20rpx;
		}
	}

	.dp-top-right {
		display: flex;
		align-items: center;

		button {
			width: 130rpx;
			height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			background: linear-gradient(90deg, #FFAF3C, #FFD879);
			color: #fff;
			border-radius: 24px;
		}
	}

	.pl-row {
		margin: 20rpx 0;
	}

	.pl-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.pl-bottom {
		color: #666;
		line-height: 1.5;
	}

	.pl-left {
		display: flex;
		align-items: center;
	}

	.pl-left-img {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;

		image {
			width: 64rpx;
			height: 64rpx;

		}
	}

	.pl-left-title {
		font-size: 26rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.pl-left-info {
		color: #999;
		font-size: 24rpx;

		text {
			margin-right: 20rpx;
		}
	}

	.pl-right-start {
		display: flex;
		justify-content: flex-end;

		image {
			width: 25rpx;
			height: auto;
		}
	}

	.pl-right-time {
		color: #666;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.pj-tags {
		display: flex;
		margin-top: 30rpx;
	}

	.pj-tag {
		background-color: #feedec;
		color: #666;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin: 0 20rpx 20rpx 0;
	}

	.tj {
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx 0;
	}

	.tj-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tt-left {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;

		&::before {
			content: "";
			display: block;
			width: 8rpx;
			height: 26rpx;
			background-color: #00B4FF;
			margin-right: 20rpx;
		}
	}

	.tip-img {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.tt-right {
		display: flex;
		align-items: center;

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.box1 {
		background-color: #fff;
		margin: 30rpx 0;
	}

	.box1-row {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;

		&:not(:nth-last-of-type(1)) {
			border-bottom: 1px solid #eee;
		}
	}

	.box1-row-left {
		display: flex;
		align-items: center;

		text {
			font-size: 30rpx;
		}

		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	.box1-row-right {
		display: flex;
		align-items: center;

		text {
			font-size: 24rpx;
			color: #999;
		}

		.box-tag {
			display: block;
			border: 1px solid $uni-color-error;
			color: $uni-color-error;
			font-size: 24rpx;
			padding: 2rpx 10rpx;
		}

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}

	.spsx {
		background-color: #fff;
		padding: 30rpx;
	}

	.spsx-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.spsx-content {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.spsx-content-left {
		text {
			&:nth-of-type(1) {
				color: $uni-color-error;
				font-weight: bold;
			}

			&:nth-of-type(2) {
				color: $uni-color-error;
				font-weight: bold;
				margin-right: 20rpx;
			}

			&:nth-of-type(3) {
				color: #999;
				text-decoration: line-through;
			}
		}
	}

	.spsx-content-right {
		text {
			font-size: 24rpx;
			color: #999;

			&:not(:nth-last-of-type(1)) {
				margin-right: 30rpx;
			}
		}
	}

	.nav {
		position: absolute;
		top: var(--status-bar-height);
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 44px;
	}

	.nav-left,
	.nav-right {
		flex-shrink: 0;
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.nav-center {
		flex-grow: 1;
		text-align: center;
		padding: 0 100rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 400rpx;
		font-size: 36rpx;
		color: #fff;
		opacity: 0.8;
	}

	.swiper-wapper {
		height: 550rpx;
		position: relative;
	}

	.swiper-item {
		image {
			width: 100%;
			height: 550rpx;
		}
	}

	.content {
		padding-bottom: 60px;
	}

	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.ftb-l {
		display: flex;
		align-items: center;
		/* #ifdef H5 */
		flex: 1;
		justify-content: space-around;
		/* #endif */

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 20rpx;
		}
	}

	.ftb-l-item {
		background: transparent;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #333;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		button {
			background-color: #FF700A;
			color: #fff;
			font-size: 30rpx;
			padding: 0;
			width: 220rpx;
			height: 72rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&:nth-of-type(1) {
				border-radius: 30rpx 0 0 30rpx;
				background-color: #FFAF3C;
				font-size: 26rpx;
			}

			&:nth-of-type(2) {
				border-radius: 0 30rpx 30rpx 0;
			}
		}
	}

	.xsms {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fd5a5f;
		color: #fff;
		padding: 20rpx 30rpx;
	}

	.xsms-left {
		display: flex;
		font-size: 28rpx;
		line-height: 38rpx;

		view {
			margin-right: 20rpx;
			opacity: 0.8;
		}

		text {
			display: block;
			background-color: #fff;
			color: $uni-color-warning;
			border-radius: 10rpx;
			padding: 0 4rpx;
			font-size: 24rpx;
			margin: 0 6rpx;
			opacity: 1;
		}
	}

	.xsms-right {
		font-size: 30rpx;
		font-family: BigruixianBlackGBV1.0;
		font-weight: 400;
		color: #FFFFFF;
	}

	.pl-imgs {
		margin-top: 20rpx;
		display: flex;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}
</style>
